import React, { useState } from 'react';
import { Tabs } from 'antd';
import PropTypes from 'prop-types';
import MyECharts from '@components/my-echarts';
import _ from 'lodash';
import './index.less';

const { TabPane } = Tabs;

const Top5Finger = props => {
  const { data, totalSites, items, onChange, jump } = props;
  const [activeKey, setActiveKey] = useState(_.get(items[0], 'key'));

  const getTabName = name => {
    return <div className="tab-name">{name}</div>;
  };

  const onTabChange = key => {
    setActiveKey(key);
    onChange(key);
  };

  const renderNameStr = (name = '', reactNode = false) => {
    if (name.length > 10) {
      if (reactNode) {
        return name.match(/.{10}/g).join('<br />');
      }
      return name.slice(0, 10) + '...';
    }
    return name;
  };

  const getPercent = value => {
    const toExponential = ((value / totalSites) * 100).toExponential(1);
    const result = Number(toExponential);
    return result;
  };

  const getOption = (data = []) => {
    let availCount = data.length;
    let chartData = [],
      chartName = [];
    for (let i = 0; i < 10; i++) {
      chartData.push(_.get(data[i], 'count', 0));
      chartName.push(_.get(data[i], 'name', '暂无数据'));
    }

    let maxData = Math.ceil(_.max(chartData) * 1.1) || 1;
    let maxDatas = new Array(availCount).fill(maxData);

    for (let i = availCount; i < 10; i++) {
      maxDatas.push({
        value: maxData,
        itemStyle: {
          color: '#515a75'
        }
      });
    }

    const option = {
      backgroundColor: 'transparent',
      tooltip: {
        formatter: ({ dataIndex }) => {
          if (dataIndex >= availCount) {
            return '';
          }
          return `${renderNameStr(chartName[dataIndex], true)}<br/>${chartData[dataIndex]}`;
        }
      },
      grid: {
        left: '0',
        right: '0',
        bottom: '5',
        top: '0',
        containLabel: true
      },
      xAxis: [
        {
          show: false,
          max: maxData
        },
        {
          show: false,
          position: 'top',
          max: maxData
        },
        {
          show: false,
          max: maxData
        }
      ],
      yAxis: {
        type: 'category',
        inverse: true,
        show: false,
        boundaryGap: false
      },
      series: [
        {
          // 条纹和百分比
          show: true,
          type: 'bar',
          barGap: '-100%',
          barWidth: '16%',
          z: 3,
          itemStyle: {
            color: '#515a75'
          },
          tooltip: false,
          label: {
            color: '#ffffff',
            fontSize: 12,
            show: true,
            position: 'insideTopRight',
            formatter: ({ dataIndex }) =>
              chartData[dataIndex]
                ? `${chartData[dataIndex]}(${getPercent(chartData[dataIndex])}%)`
                : '0(0%)',
            offset: [0, 7]
          },
          data: maxDatas
        },
        {
          show: false,
          type: 'bar',
          barGap: '-100%',
          barWidth: '16%',
          z: 999,
          data: chartData.map(value => ({ value, itemStyle: { color: '#ffffff' } }))
        },
        {
          show: true,
          type: 'bar',
          xAxisIndex: 1,
          barGap: '-100%',
          barWidth: '10%',
          itemStyle: {
            normal: {
              barBorderRadius: 200,
              color: 'transparent'
            }
          },
          label: {
            normal: {
              show: true,
              position: [0, 12],
              textStyle: {
                fontSize: 12,
                color: '#686C78'
              },
              formatter: ({ dataIndex }) => renderNameStr(chartName[dataIndex]) || ''
            }
          },
          data: chartData.map(value => ({ value, label: { color: '#ffffff' } }))
        }
      ]
    };
    return option;
  };

  return (
    <div className="map-topn-finger">
      <Tabs activeKey={activeKey} onChange={onTabChange}>
        {items.map(({ name, key }) => {
          return (
            <TabPane key={key} tab={getTabName(name)}>
              <div className="finger-chart-item">
                <MyECharts option={getOption(data[key])} onClick={e => jump(e, key)} />
              </div>
            </TabPane>
          );
        })}
      </Tabs>
    </div>
  );
};

Top5Finger.propTypes = {
  data: PropTypes.array,
  totalSites: PropTypes.number,
  items: PropTypes.array,
  onChange: PropTypes.func,
  jump: PropTypes.func
};

export default Top5Finger;
